<template>
  <up-popup v-model:show="show" zIndex="100" :safeAreaInsetTop="true" :customStyle="{bottom:'120rpx',height:'80vh'}"
            round="20" closeIconPos="top-right">
    <view>
      <view class="text-center">评价</view>
      <view class="flex-center p-c-15">
        <view v-for="item of appraiseArr" :key="item.id" class="btn-border" @click="selectAppraise(item.id)"
              :class="{ 'active': item.id === currentAppraise }" style="margin-right: 20rpx;">
          {{ item.name }}
        </view>
      </view>
    </view>
    <scroll-view scroll-y="true" show-scrollbar="false" @scrolltolower="loadMore" lower-threshold="100"
                 style="height: calc(100vh - 500rpx);background: #fff">
      <view class="p-20" v-for="i in 3" :key="i">
        <view class="flex p-c-10">
          <up-avatar src="https://picsum.photos/200" shape="circle" size="25"></up-avatar>
          <view class="p-r-10">张三</view>
          <image src="/static/icon/vip/user-level-1.png"
                 style="width: 70rpx;height: 30rpx;"/>
        </view>
        <view class="text-2" style="margin-left: 60rpx">
          阿斯顿发山东范德萨范德萨发阿斯蒂芬答复答复水岸东方发斯蒂芬萨达水岸东方发达防守打法阿斯蒂芬阿斯蒂芬士大夫阿斯蒂芬阿斯蒂芬
        </view>
        <view class="grid-3 p-c-10" style="margin-left: 60rpx;">
          <image  v-for="i in 3" :key="i" src="https://picsum.photos/200" style="width: 100%;height: 200rpx;border-radius: 20rpx"/>
        </view>
      </view>
      <up-loadmore
          :status="loading"
          loadingText="努力加载中,先喝杯茶"
          loadmore-text="轻轻上拉"
          nomore-text="实在没有了，别拉了~"
          color="#909399"
          height="60rpx"
      ></up-loadmore>
    </scroll-view>
  </up-popup>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {appraiseArr} from "@/util/options/system";

const show = ref(false)
const loading = ref('loadmore')
const currentAppraise = ref(0)


const showPop = () => {
  show.value = true
}

const loadMore = () => {
  loading.value = 'loading'
  setTimeout(() => {
    loading.value = 'nomore'
  }, 1000)
}

const selectAppraise = (id)=>{
  currentAppraise.value = id
}

const closePop = () => {
  show.value = false
}

defineExpose({showPop})
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.item-box {
  padding: 20rpx;
}

.appraise {
}
</style>